<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>多学科会诊协作</title>
    <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
    <style>
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }
        
        .video-container {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin-bottom: 20px;
        }
        .video-box {
            width: 300px;
            height: 225px;
            background: #f5f5f5;
            border-radius: 8px;
            overflow: hidden;
        }
        video {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        body { font-family: Arial, sans-serif; margin: 0; padding: 0; }
        .status-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 20px;
            background-color: #f5f5f5;
            border-bottom: 1px solid #ddd;
        }
        .status-item {
            display: flex;
            align-items: center;
        }
        .time {
            font-weight: bold;
        }
        .doctor-info {
            margin-left: 20px;
        }
        .notification {
            position: relative;
            margin-right: 20px;
        }
        .notification-badge {
            position: absolute;
            top: -5px;
            right: -5px;
            background-color: red;
            color: white;
            border-radius: 50%;
            width: 16px;
            height: 16px;
            font-size: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .search-box {
            padding: 5px 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .consultation-container {
            display: flex;
            height: calc(100vh - 60px);
        }
        .patient-info {
            width: 300px;
            padding: 20px;
            background: white;
            border-right: 1px solid #eee;
        }
        .consultation-main {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        .consultation-tabs {
            display: flex;
            border-bottom: 1px solid #ddd;
        }
        .tab {
            padding: 10px 20px;
            cursor: pointer;
        }
        .tab.active {
            border-bottom: 2px solid #2196F3;
            color: #2196F3;
        }
        .consultation-content {
            flex: 1;
            display: flex;
        }
        .video-container {
            flex: 1;
            background: #f5f5f5;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .whiteboard-container {
            width: 400px;
            background: white;
            border-left: 1px solid #eee;
        }
        .documents-container {
            padding: 20px;
            background: white;
            border-top: 1px solid #eee;
        }
        .async-consultation {
            padding: 20px;
            background: white;
            border-top: 1px solid #eee;
        }
    </style>
</head>
<body>
    <div class="status-bar">
        <div class="status-item">
            <div class="time" id="current-time"></div>
            <div class="doctor-info">
                <span id="doctor-name">张医生</span>
                <span id="doctor-department"> - 内科</span>
                <span id="doctor-title"> - 主任医师</span>
            </div>
        </div>
        <div class="status-item">
            <div style="margin-left: 20px;">
                <span>主治医生: </span>
                <span id="attending-doctor">李医生</span>
            </div>
            <div class="add-patient" id="add-patient-btn" style="margin-right: 20px; color: #2196F3; cursor: pointer;">增加患者</div>
        </div>
        <div class="status-item">
            <input type="text" class="search-box" placeholder="患者姓名/床号">
        </div>
    </div>

    <div class="consultation-container">
        <div class="patient-info">
            <h3>患者信息</h3>
            <div class="patient-list" style="margin-bottom: 20px;">
                <div class="patient-item" style="padding: 10px; border-bottom: 1px solid #eee; cursor: pointer;" onclick="selectPatient(this, '张三', '3号床')">
                    <div style="font-weight: bold;">张三</div>
                    <div style="font-size: 12px; color: #666;">3号床 · 内科</div>
                </div>
                <div class="patient-item" style="padding: 10px; border-bottom: 1px solid #eee; cursor: pointer;" onclick="selectPatient(this, '李四', '5号床')">
                    <div style="font-weight: bold;">李四</div>
                    <div style="font-size: 12px; color: #666;">5号床 · 心血管科</div>
                </div>
                <div class="patient-item" style="padding: 10px; border-bottom: 1px solid #eee; cursor: pointer;" onclick="selectPatient(this, '王五', '8号床')">
                    <div style="font-weight: bold;">王五</div>
                    <div style="font-size: 12px; color: #666;">8号床 · 神经内科</div>
                </div>
            </div>
            <div id="selected-patient-info">
                <div>姓名: <span id="patient-name">张三</span></div>
                <div>性别: <span id="patient-gender">男</span></div>
                <div>年龄: <span id="patient-age">45</span></div>
                <div>床号: <span id="patient-bed">3号床</span></div>
                <div>诊断: <span id="patient-diagnosis">冠心病</span></div>
            </div>
            <div style="margin-top: 20px;">
                <h4>生命体征</h4>
                <div>心率: <span id="vital-heartrate">78</span> bpm</div>
                <div>血压: <span id="vital-bp">120/80</span> mmHg</div>
                <div>血氧: <span id="vital-spo2">98</span>%</div>
            </div>
        </div>

        <div class="consultation-main">
            <div class="consultation-tabs">
                <div class="tab active" onclick="switchTab('video')">视频会诊</div>
                <div class="tab" onclick="switchTab('async')">异步会诊</div>
            </div>

            <div class="consultation-content">
                <div class="video-container">
                    <div style="text-align: center;">
                        <div style="width: 640px; height: 360px; background: #333; margin-bottom: 10px;"></div>
                        <button onclick="startVideoConsultation()" style="padding: 10px 20px; background: #2196F3; color: white; border: none; border-radius: 4px; cursor: pointer;">发起视频会诊</button>
                    </div>
                </div>
                <div class="whiteboard-container">
                    <h4 style="padding: 10px 20px; margin: 0; border-bottom: 1px solid #eee;">电子白板</h4>
                    <canvas id="whiteboard" style="height: 300px; width: 100%; border: 1px solid #eee; margin: 10px; cursor: crosshair;"></canvas>
                    <div style="padding: 10px; display: flex; gap: 5px;">
                        <button onclick="setTool('pen')" style="padding: 5px 10px; background: #2196F3; color: white; border: none; border-radius: 4px; cursor: pointer;">画笔</button>
                        <button onclick="setTool('eraser')" style="padding: 5px 10px; background: #f5f5f5; border: 1px solid #ddd; border-radius: 4px; cursor: pointer;">橡皮擦</button>
                        <input type="color" id="color-picker" value="#000000" style="width: 30px; height: 30px; cursor: pointer;">
                        <input type="range" id="brush-size" min="1" max="20" value="3" style="width: 80px;">
                        <button onclick="clearCanvas()" style="padding: 5px 10px; background: #FF5722; color: white; border: none; border-radius: 4px; cursor: pointer;">清除</button>
                    </div>
                </div>
            </div>

            <div class="documents-container">
                <h4>病历资料</h4>
                <div style="display: flex; gap: 10px; margin-top: 10px;">
                    <div style="padding: 10px; background: #f5f5f5; border-radius: 4px; cursor: pointer;">
                        <div style="font-size: 36px; text-align: center;">📄</div>
                        <div style="text-align: center;">入院记录</div>
                    </div>
                    <div style="padding: 10px; background: #f5f5f5; border-radius: 4px; cursor: pointer;">
                        <div style="font-size: 36px; text-align: center;">🩺</div>
                        <div style="text-align: center;">检查报告</div>
                    </div>
                    <div style="padding: 10px; background: #f5f5f5; border-radius: 4px; cursor: pointer;">
                        <div style="font-size: 36px; text-align: center;">💊</div>
                        <div style="text-align: center;">用药记录</div>
                    </div>
                    <div style="padding: 10px; background: #f5f5f5; border-radius: 4px; cursor: pointer;">
                        <div style="font-size: 36px; text-align: center;">📊</div>
                        <div style="text-align: center;">检验数据</div>
                    </div>
                    <div style="padding: 10px; background: #f5f5f5; border-radius: 4px; cursor: pointer;">
                        <div style="font-size: 36px; text-align: center;">🖼️</div>
                        <div style="text-align: center;">影像资料</div>
                    </div>
                </div>
            </div>

            <div class="async-consultation">
                <h4>异步会诊记录</h4>
                <div style="margin-top: 10px;">
                    <div style="padding: 10px; background: #f5f5f5; border-radius: 4px; margin-bottom: 5px;">
                        <div style="font-weight: bold;">心血管科会诊</div>
                        <div style="font-size: 12px; color: #666;">2023-11-15 10:30 | 李医生</div>
                        <div style="margin-top: 5px;">建议调整抗凝药物剂量，密切监测INR值。</div>
                    </div>
                    <div style="padding: 10px; background: #f5f5f5; border-radius: 4px;">
                        <div style="font-weight: bold;">内分泌科会诊</div>
                        <div style="font-size: 12px; color: #666;">2023-11-14 15:45 | 王医生</div>
                        <div style="margin-top: 5px;">血糖控制方案调整，建议胰岛素泵治疗。</div>
                    </div>
                </div>
                <div style="margin-top: 10px;">
                    <textarea style="width: 100%; height: 80px; padding: 10px; box-sizing: border-box; border: 1px solid #ddd; border-radius: 4px;" placeholder="输入会诊请求内容..."></textarea>
                    <button onclick="submitAsyncConsultation()" style="margin-top: 5px; padding: 8px 15px; background: #2196F3; color: white; border: none; border-radius: 4px; cursor: pointer;">提交会诊请求</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 更新时间
        function updateTime() {
            const now = new Date();
            document.getElementById('current-time').textContent = now.toLocaleTimeString();
        }
        setInterval(updateTime, 1000);
        updateTime();
        
        // 选择患者
        function selectPatient(element, name, bed) {
            // 移除之前选中的样式
            document.querySelectorAll('.patient-item').forEach(item => {
                item.style.background = 'none';
            });
            
            // 添加选中样式
            element.style.background = '#f0f7ff';
            
            // 更新患者信息
            document.getElementById('patient-name').textContent = name;
            document.getElementById('patient-bed').textContent = bed;
            
            // 根据患者更新其他信息
            if(name === '张三') {
                document.getElementById('patient-gender').textContent = '男';
                document.getElementById('patient-age').textContent = '45';
                document.getElementById('patient-diagnosis').textContent = '冠心病';
            } else if(name === '李四') {
                document.getElementById('patient-gender').textContent = '女';
                document.getElementById('patient-age').textContent = '62';
                document.getElementById('patient-diagnosis').textContent = '高血压';
            } else if(name === '王五') {
                document.getElementById('patient-gender').textContent = '男';
                document.getElementById('patient-age').textContent = '38';
                document.getElementById('patient-diagnosis').textContent = '糖尿病';
            }
        }

        // 切换标签页
        function switchTab(tab) {
            document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
            document.querySelector(`.tab[onclick="switchTab('${tab}')"]`).classList.add('active');
        }

        // 发起视频会诊
        async function startVideoConsultation() {
            try {
                const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
                
                const members = prompt('请输入要邀请的会诊成员，用逗号分隔：');
                if (members) {
                    alert(`已邀请 ${members} 加入视频会诊！`);
                    // 自动开启视频会议
                    document.querySelector('.video-container').innerHTML = `
                        <div style="width: 640px; height: 360px; background: #333; margin-bottom: 10px;">
                            <video id="localVideo" autoplay muted style="width: 100%; height: 100%;"></video>
                            <video id="remoteVideo" autoplay style="width: 100%; height: 100%; display: none;"></video>
                        </div>
                        <button onclick="endVideoConsultation()" style="padding: 10px 20px; background: #FF5722; color: white; border: none; border-radius: 4px; cursor: pointer;">结束会诊</button>
<button onclick="triggerSOS()" style="padding: 10px 20px; background: #f44336; color: white; border: none; border-radius: 4px; cursor: pointer; margin-left: 10px; animation: pulse 2s infinite;">SOS</button>
                    `;
                    
                    // 设置本地视频流
                    const localVideo = document.getElementById('localVideo');
                    localVideo.srcObject = stream;
                    
                    // 模拟视频连接
                    setTimeout(() => {
                        document.getElementById('remoteVideo').style.display = 'block';
                        alert('视频会议已连接！');
                    }, 1000);
                }
            } catch (err) {
                console.error('无法访问摄像头:', err);
                alert('无法访问摄像头，请检查权限设置');
            }
        }
        
        // 结束视频会诊
        function endVideoConsultation() {
            // 停止所有视频流
            const localVideo = document.getElementById('localVideo');
            if (localVideo && localVideo.srcObject) {
                localVideo.srcObject.getTracks().forEach(track => track.stop());
            }
            
            const remoteVideo = document.getElementById('remoteVideo');
            if (remoteVideo && remoteVideo.srcObject) {
                remoteVideo.srcObject.getTracks().forEach(track => track.stop());
            }
            
            document.querySelector('.video-container').innerHTML = `
                <div style="text-align: center;">
                    <div style="width: 640px; height: 360px; background: #333; margin-bottom: 10px;"></div>
                    <button onclick="startVideoConsultation()" style="padding: 10px 20px; background: #2196F3; color: white; border: none; border-radius: 4px; cursor: pointer;">发起视频会诊</button>
                </div>
            `;
            alert('视频会议已结束！');
        }

        // 提交异步会诊请求
        function submitAsyncConsultation() {
            const content = document.querySelector('textarea').value;
            if (content) {
                alert('会诊请求已提交！');
            } else {
                alert('请输入会诊请求内容！');
            }
        }
        
        // SOS按钮功能
        function triggerSOS() {
            // 视觉反馈
            const sosButton = document.querySelector('button[onclick="triggerSOS()"]');
            sosButton.style.animation = 'none';
            sosButton.offsetHeight; // 触发重绘
            sosButton.style.animation = 'pulse 0.5s infinite';
            
            // 听觉反馈
            const audio = new Audio('https://assets.mixkit.co/sfx/preview/mixkit-alarm-digital-clock-beep-989.mp3');
            audio.play();
            
            alert('SOS警报已触发！相关人员将立即响应！');
        }
    </script>
    <script>
        // 白板功能实现
        const canvas = document.getElementById('whiteboard');
        const ctx = canvas.getContext('2d');
        let isDrawing = false;
        let currentTool = 'pen';
        let currentColor = '#000000';
        let brushSize = 3;
        
        // 设置画布大小
        function resizeCanvas() {
            canvas.width = canvas.offsetWidth;
            canvas.height = canvas.offsetHeight;
        }
        
        // 初始化画布
        resizeCanvas();
        window.addEventListener('resize', resizeCanvas);
        
        // 设置工具
        function setTool(tool) {
            currentTool = tool;
            document.querySelectorAll('.whiteboard-container button').forEach(btn => {
                btn.style.background = '#f5f5f5';
                btn.style.color = '#000';
            });
            
            if(tool === 'pen') {
                document.querySelector('button[onclick="setTool(\"pen\")"]').style.background = '#2196F3';
                document.querySelector('button[onclick="setTool(\"pen\")"]').style.color = 'white';
            } else if(tool === 'eraser') {
                document.querySelector('button[onclick="setTool(\"eraser\")"]').style.background = '#2196F3';
                document.querySelector('button[onclick="setTool(\"eraser\")"]').style.color = 'white';
            }
        }
        
        // 清除画布
        function clearCanvas() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
        }
        
        // 绘图事件
        canvas.addEventListener('mousedown', startDrawing);
        canvas.addEventListener('mousemove', draw);
        canvas.addEventListener('mouseup', stopDrawing);
        canvas.addEventListener('mouseout', stopDrawing);
        
        // 颜色选择器
        document.getElementById('color-picker').addEventListener('input', function(e) {
            currentColor = e.target.value;
        });
        
        // 画笔大小
        document.getElementById('brush-size').addEventListener('input', function(e) {
            brushSize = e.target.value;
        });
        
        function startDrawing(e) {
            isDrawing = true;
            draw(e);
        }
        
        function draw(e) {
            if(!isDrawing) return;
            
            ctx.lineJoin = 'round';
            ctx.lineCap = 'round';
            
            if(currentTool === 'pen') {
                ctx.strokeStyle = currentColor;
                ctx.globalCompositeOperation = 'source-over';
            } else if(currentTool === 'eraser') {
                ctx.strokeStyle = '#ffffff';
                ctx.globalCompositeOperation = 'destination-out';
            }
            
            ctx.lineWidth = brushSize;
            
            ctx.beginPath();
            ctx.moveTo(e.offsetX, e.offsetY);
            ctx.lineTo(e.offsetX, e.offsetY);
            ctx.stroke();
        }
        
        function stopDrawing() {
            isDrawing = false;
            ctx.beginPath();
        }
    </script>
</body>
</html>